<template>
	<view class="content">
		<view class="header-container">
			<view class="banner">
				<image class="banner-bg" src="/static/icon/pin_banner_01.png"></image>
				<image class="banner-bg-bottom" src="/static/arc.png"></image>
			</view>
		</view>
		<block v-if="goodsList.length">
			<view v-for="(item, index) in goodsList" class="goods-list" style="margin-bottom: 10px;" @click="toproduct(item)"
			 :key="index">
				<view class="image-wrapper">
					<view class="storeType" v-show="item.attrType == 'goods'">自营</view>
					<view class="storeType" v-show="item.attrType == 'giftBag'">礼包</view>
					<view class="storeType" v-show="item.attrType == 'pintuan'">拼团</view>
					<image :src="item.goodsImg" class="goodsPic" mode="scaleToFill"></image>
				</view>
				<view class="goodContext">
					<view class="title ">{{item.goodsName}}</view>
					<view class="price-box">
						<text class="price" style="text-decoration: line-through;">{{item.shopPrice}}</text>
						<!-- <text class='costScore'>{{item.startUs?'可兑换':'无积分兑换'}}</text> -->
					</view>
					<view class="saleLess">
						<view class="vipBox">
							会员价：<text class="vprice">{{item.shopVipPrice}}</text>
						</view>
						<view class="rang">
							运费：{{item.goodsFreight}}
						</view>
					</view>
				</view>
			</view>
			<!-- <view>
				<goodsList :column='1' :goodsList='goodsList'></goodsList>
			</view> -->
			<uni-load-more :status="loadingType"></uni-load-more>
		</block>

		<empty v-else emptyText="暂无对应数据"></empty>
		<!-- <view class="cate-mask" :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''" @click="toggleCateMask">
			<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
				<scroll-view scroll-y class="cate-list">
					<view v-for="item in cateList" :key="item.id">
						<view class="cate-item b-b two">{{item.name}}</view>
						<view 
							v-for="tItem in item.child" :key="tItem.id" 
							class="cate-item b-b" 
							:class="{active: tItem.id==cateId}"
							@click="changeCate(tItem)">
							{{tItem.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view> -->

	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import goodsList from '@/components/goodsCardGrid/goodsCardGrid.vue'
	import empty from "@/components/empty.vue"
	export default {
		components: {
			uniLoadMore,
			goodsList,
			empty
		},
		data() {
			return {
				headerPosition: "fixed",
				headerTop: "0px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0,
				goodsList: [],
				inType: '',
				currentPage: 1,
				total: 1
			};
		},

		//下拉刷新
		onPullDownRefresh() {
			this.loadingType = 'more'
			// this.currentPage = 1
			this.loadData();
			uni.stopPullDownRefresh()
		},
		onLoad(options) {
			// // #ifdef H5
			// this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// // #endif
			// this.cateId = options.tid;
			// this.loadCateList(options.fid,options.sid);
			if (options.type) {
				this.inType = options.type
				console.log(this.inType)
			}
			this.loadData();
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
		},
		//加载更多
		onReachBottom() {
			this.currentPage++
			this.loadData();
		},
		methods: {

			toproduct(item) {
				//测试数据没有写id，用title代替
				console.log(item)
				let id = item.goodsId;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData() {
				let that = this
				if (that.currentPage > this.total) {
					that.loadingType = 'nomore'
					return
				}
				if (that.currentPage == 1) {
					that.goodsList = []
				}
				if (that.inType == 'mall') {
					that.$Request.request('/api/Goods/vipStore', 'POST', {
						offset: that.currentPage
					}).then(res => {
						if (res.status == 1) {
							// that.goodsList.concat(res.data)
							res.data.forEach(item => {
								that.goodsList.push(item)
							})
							that.total = parseInt(res.pageNum)
							if (that.currentPage == this.total) {
								that.loadingType = 'nomore'
							}
						}

					}).catch(err => {
						console.log(err)
					})
				}
				if (that.inType == 'free') {
					that.$Request.request('/api/Goods/freeOfCharge', 'POST', {
						offset: that.currentPage
					}).then(res => {
						if (res.status == 1) {
							console.log(res)
							res.data.forEach(item => {
								that.goodsList.push(item)
							})
							that.total = parseInt(res.pageNum)
							if (that.currentPage == this.total) {
								that.loadingType = 'nomore'
							}
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},

			//显示分类面板
			toggleCateMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.cateMaskState = 2;
				setTimeout(() => {
					this.cateMaskState = state;
				}, timer)
			},

			stopPrevent() {}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		.goods-list {
			.image-wrapper {
				.goodsPic {
					background-size: 100% 100%;
				}
			}
		}
	}

	.goodContext {
		display: flex;
		flex-direction: column;
		width: 55%;
		justify-content: space-between;
		padding-left: 10px;

		.saleLess {
			display: flex;
			justify-content: space-between;
			color: #ff6600;
			font-size: 14px;
			padding: 15px 0px;
		}
	}

	@import './list.scss'
</style>
